<!-- 回款列表-新建回款信息组件  -->
<template>
  <a-modal
    width="70%"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    :mask-closable="false"
  >
    <template #title> 新建发票记录 </template>
    <div>
      <a-form :model="form" :rules="rules" auto-label-width>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="returnedCode" label="付款方式：">
              <a-select placeholder="请选择回款类型" v-model="form.payType">
                <a-option
                  v-for="(item, index) in settingData"
                  :key="index"
                  :value="item.id"
                  >{{ item.name }}</a-option
                >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="returnedType" label="发票编号：">
              <a-input
                placeholder="请填写账号"
                size="large"
                v-model="form.invoiceNumber"
                allow-clear
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="returnedWays" label="发票类型：">
              <a-select
                placeholder="请选择发票类型"
                v-model="form.recordTypeId"
                @change="getTaxRate"
              >
                <a-option
                  v-for="(item, index) in invoiceForm"
                  :key="index"
                  :value="item.id"
                  >{{ item.typeName }}</a-option
                >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="returnedTime" label="发票税率：">
              <a-input
                placeholder="请输入回款类型"
                size="large"
                v-model="form.TaxRate"
                allow-clear
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="accountName" label="开票时间：">
              <a-date-picker v-model="form.recordTime" style="width: 200px" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="account" label="开票金额：">
              <a-input-number
                :min="1"
                placeholder="请输入合同总额"
                allow-clear
                v-model="form.recordPrice"
              >
                <template #prepend>￥</template>
                <template #append>
                  <a-select
                    v-model="form.recordPriceUnit"
                    :style="{
                      width: '100px',
                    }"
                    placeholder="人民币"
                  >
                    <a-option>人民币</a-option>
                    <a-option>美金</a-option>
                  </a-select>
                </template>
              </a-input-number>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="accountName" label="开票科目：">
              <a-input
                placeholder="请填写账号"
                size="large"
                v-model="form.recordProject"
                allow-clear
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="account" label="开票人：">
              <a-select placeholder="请选择发票类型" v-model="form.receiveBy">
                <a-option
                  v-for="(item, index) in PersonnelInfoData"
                  :key="index"
                  :value="item.id"
                  >{{ item.name }}</a-option
                >
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, computed, watchEffect, ref } from 'vue';
  import { cloneDeep } from 'lodash';
  import { GetSetInvoiceInfo } from '@/api/order-management/returned-management/base-setting/index';
  import { GetClientDetailTabs } from '@/api/order-management/client-management/client-list/index';
  import { GetReturnedTypeInfo } from '@/api/order-management/returned-management/base-setting';
  import { GetPersonnelinformation } from '@/api/home/System settings/personal-information/index';

  // 获取回款类型设置基本信息
  const settingData = ref();
  const getClientSettingInfo = async () => {
    const res = await GetReturnedTypeInfo();
    settingData.value = res;
  };

  getClientSettingInfo();

  const props = withDefaults(
    //参数说明
    defineProps<{
      visible: boolean;
      clientId: number;
      orderId: string;
      currForm: any;
    }>(),
    {
      visible: false,
    }
  );

  let form: any = ref({});

  const emit = defineEmits(['update:visible', 'editinvoiceInfo']);

  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  const invoiceForm = ref<any>([]);
  const getAccountInvoice = async () => {
    const res = await GetSetInvoiceInfo();
    invoiceForm.value = res;
  };
  getAccountInvoice();

  // 获取发票税率
  const getTaxRate = (key: number) => {
    const msg: any = invoiceForm.value.filter((i: any) => i.id === key);
    form.value.TaxRate = msg[0].taxRate;
  };
  watchEffect(() => {
    if (modalVisible.value) {
      form.value = cloneDeep(props.currForm);
      form.value.orderId = props.orderId;
      const clientId = Number(props.clientId);
    }
  });
  const rules = reactive({});

  // 保存按钮
  const handleOk = () => {
    form.value.recordTime = new Date(form.value.recordTime).toJSON();
    emit('editinvoiceInfo', form.value);
    modalVisible.value = false;
  };

  // 取消按钮
  const handleCancel = () => {
    modalVisible.value = false;
  };

  // 获取销售负责人信息
  const PersonnelInfoData = ref();
  const GetPersonnelInfo = async () => {
    const res = await GetPersonnelinformation({ page: 1, size: 99999 });
    PersonnelInfoData.value = res.content.data;
  };
  GetPersonnelInfo();
</script>

<style scoped lang="less"></style>
